<div class="content-heading">
    Dashboard
    <small>{{ 'dashboard.WELCOME' | translate }} !</small>
</div>
<div class="row">
    <div class="col-lg-4">
        <!-- START List group-->
        <ul class="list-group">
            <li class="list-group-item">
                <div class="row row-table pv-lg">
                    <div class="col-xs-6">
                        <p class="m0 lead">1204</p>
                        <p class="m0">
                            <small>Commits this month</small>
                        </p>
                    </div>
                    <div class="col-xs-6 text-center">
                        <div [sparkline]="sparkOptions1" values="3,6,7,8,4,5"></div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="row row-table pv-lg">
                    <div class="col-xs-6">
                        <p class="m0 lead">$ 3,200.00</p>
                        <p class="m0">
                            <small>Available budget</small>
                        </p>
                    </div>
                    <div class="col-xs-6 text-center">
                        <div [sparkline]="sparkOptions2" values="7,3,4,7,5,9,4,4,7,5,9,6,4"></div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="row row-table pv-lg">
                    <div class="col-xs-6">
                        <p class="m0 lead">67</p>
                        <p class="m0">
                            <small>New followers</small>
                        </p>
                    </div>
                    <div class="col-xs-6">
                        <ul class="list-inline text-center">
                            <li>
                                <a href="#" tooltip="Katie">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/02.jpg" alt="Follower" />
                                </a>
                            </li>
                            <li>
                                <a href="#" tooltip="Cody">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/01.jpg" alt="Follower" />
                                </a>
                            </li>
                            <li>
                                <a href="#" tooltip="Tamara">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/03.jpg" alt="Follower" />
                                </a>
                            </li>
                            <li>
                                <a href="#" tooltip="Gene">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/04.jpg" alt="Follower" />
                                </a>
                            </li>
                            <li>
                                <a href="#" tooltip="Marsha">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/04.jpg" alt="Follower" />
                                </a>
                            </li>
                            <li>
                                <a href="#" tooltip="Robin">
                                    <img class="img-responsive img-circle thumb24" src="assets/img/user/09.jpg" alt="Follower" />
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
        <!-- END List group-->
    </div>
    <div class="col-lg-8">
        <!-- START bar chart-->
        <div class="panel" id="panelChart3">
            <div class="panel-heading">
                <!-- START button group-->
                <div class="pull-right btn-group" dropdown>
                    <button class="btn btn-default btn-sm" type="button" dropdownToggle>Monthly</button>
                    <ul *dropdownMenu class="dropdown-menu fadeInLeft animated" role="menu">
                        <li><a href="#">Daily</a></li>
                        <li><a href="#">Monthly</a></li>
                        <li><a href="#">Yearly</a></li>
                    </ul>
                </div>
                <!-- END button group-->
                <div class="panel-title">Projects Hours</div>
            </div>
            <div class="panel-body">
                <div flot [dataset]="barStackedData" [options]="barStackedOptions" height="250"></div>
            </div>
        </div>
        <!-- END bar chart-->
    </div>
</div>
<div class="unwrap mv-lg">
    <!-- START chart-->
    <div class="panel" id="panelChart9">
        <div class="panel-heading">
            <!-- START button group-->
            <div class="pull-right btn-group" dropdown>
                <button class="btn btn-default btn-sm" type="button" dropdownToggle>All time</button>
                <ul *dropdownMenu class="dropdown-menu fadeInLeft animated" role="menu">
                    <li><a href="#">Daily</a></li>
                    <li><a href="#">Monthly</a></li>
                    <li class="divider"></li>
                    <li><a href="#">All time</a></li>
                </ul>
            </div>
            <!-- END button group-->
            <div class="panel-title">Overall progress</div>
        </div>
        <div class="panel-body">
            <div flot [dataset]="splineData" [options]="splineOptions" height="300"></div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-3 col-xs-6 text-center">
                    <p>Projects</p>
                    <div class="h1">25</div>
                </div>
                <div class="col-sm-3 col-xs-6 text-center">
                    <p>Teammates</p>
                    <div class="h1">85</div>
                </div>
                <div class="col-sm-3 col-xs-6 text-center">
                    <p>Hours</p>
                    <div class="h1">380</div>
                </div>
                <div class="col-sm-3 col-xs-6 text-center">
                    <p>Budget</p>
                    <div class="h1">$ 10,000.00</div>
                </div>
            </div>
        </div>
    </div>
    <!-- END chart-->
</div>
<!-- START radial charts-->
<div class="row mb-lg">
    <div class="col-sm-3 col-xs-6 text-center">
        <p>Current Project</p>
        <div class="text-center pv-lg">
            <div class="easypie-chart easypie-chart-md" easypiechart [options]="pieOptions1" [percent]="easyPiePercent1">
                <span>{{easyPiePercent1}}%</span>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <p>Current Progress</p>
        <div class="text-center pv-lg">
            <div class="easypie-chart easypie-chart-md" easypiechart [options]="pieOptions2" [percent]="easyPiePercent2">
                <span>{{easyPiePercent2}}%</span>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <p>Space Usage</p>
        <div class="text-center pv-lg">
            <div class="easypie-chart easypie-chart-md" easypiechart [options]="pieOptions3" [percent]="easyPiePercent3">
                <span>{{easyPiePercent3}}%</span>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-xs-6 text-center">
        <p>Interactions</p>
        <div class="text-center pv-lg">
            <div class="easypie-chart easypie-chart-md" easypiechart [options]="pieOptions4" [percent]="easyPiePercent4">
                <span>{{easyPiePercent4}}%</span>
            </div>
        </div>
    </div>
</div>
<!-- START radial charts-->
<!-- START Multiple List group-->
<div class="list-group">
    <a class="list-group-item" href="#">
        <table class="wd-wide">
            <tbody>
                <tr>
                    <td class="wd-xs">
                        <div class="ph">
                            <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                        </div>
                    </td>
                    <td>
                        <div class="ph">
                            <h4 class="media-box-heading">Project A</h4>
                            <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                        </div>
                    </td>
                    <td class="wd-sm hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0">Last change</p>
                            <small class="text-muted">4 weeks ago</small>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-user mr fa-lg"></em>26</p>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-doc mr fa-lg"></em>3500</p>
                        </div>
                    </td>
                    <td class="wd-sm">
                        <div class="ph">
                            <progressbar class="m0 progress-xs" value="80" type="success">80%</progressbar>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </a>
</div>
<div class="list-group">
    <a class="list-group-item" href="#">
        <table class="wd-wide">
            <tbody>
                <tr>
                    <td class="wd-xs">
                        <div class="ph">
                            <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                        </div>
                    </td>
                    <td>
                        <div class="ph">
                            <h4 class="media-box-heading">Project X</h4>
                            <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                        </div>
                    </td>
                    <td class="wd-sm hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0">Last change</p>
                            <small class="text-muted">Today at 06:23 am</small>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-user mr fa-lg"></em>3</p>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-doc mr fa-lg"></em>150</p>
                        </div>
                    </td>
                    <td class="wd-sm">
                        <div class="ph">
                            <progressbar class="m0 progress-xs" value="50" type="purple">50%</progressbar>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </a>
</div>
<div class="list-group">
    <a class="list-group-item" href="#">
        <table class="wd-wide">
            <tbody>
                <tr>
                    <td class="wd-xs">
                        <div class="ph">
                            <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                        </div>
                    </td>
                    <td>
                        <div class="ph">
                            <h4 class="media-box-heading">Project Z</h4>
                            <small class="text-muted">Vestibulum ante ipsum primis in faucibus orci</small>
                        </div>
                    </td>
                    <td class="wd-sm hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0">Last change</p>
                            <small class="text-muted">Yesterday at 10:20 pm</small>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-user mr fa-lg"></em>15</p>
                        </div>
                    </td>
                    <td class="wd-xs hidden-xs hidden-sm">
                        <div class="ph">
                            <p class="m0 text-muted">
                                <em class="icon-doc mr fa-lg"></em>480</p>
                        </div>
                    </td>
                    <td class="wd-sm">
                        <div class="ph">
                            <progressbar class="m0 progress-xs" value="20" type="green">20%</progressbar>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </a>
    <!-- END dashboard main content-->
</div>
<!-- END Multiple List group-->
